<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .show {
            display: none;
        }
        .pink {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .black {
            border: 4px black solid;
        }

        .checkBox {
            width: 555px;
            margin: 30px auto;
            position: relative;
        }
        .option {
            width: 555px;
            height: 310px;
            background: url("./img/bg.png") no-repeat;
            position: relative;
        }
        a {
            width: 70px;
            height: 30px;
            line-height: 30px;
            display: inline-block;
            border: 1px solid #999;
            text-decoration: none;
            text-align: center;
            color: #000;
            margin-top: 160px;
        }
        .option a:first-child {
            margin-left: 170px;
        }
        a.checked {
            border: 1px solid rgb(228, 57, 60);
            background: url("img/newicon20140910.png") no-repeat right bottom;
        }
        h3{
            margin: 0;
            color: #e15671;
            position: absolute;
            left: 45%;
            top: 100px;
            z-index: 9;
        }
        .option{
            background: url(./img/checkboxbg.png) no-repeat 0 -260px;
        }
    </style>
</head>
<body>
<div id="box1">
    这是一个div
</div>
<hr>
<div>
    <div class="title">菜单</div>
    <ul class="list show">
        <li>微博</li>
        <li>图片</li>
        <li>博客</li>
        <li>视频</li>
        <li>更多</li>
    </ul>

    <div class="pink"></div>

    <div class="checkBox">
        <h3>模拟复选</h3>
        <div class="option">
            <a href="javascript:;">美食</a>
            <a href="javascript:;">逛街</a>
            <a href="javascript:;">旅游</a>
        </div>
    </div>
</div>
<script>
    //1、cssText的使用:其实是批量修改html的style的属性值，特点是如果定义时用=那么会覆盖所有的style属性值，如果只是要增加，可以用+=
    let div1 = document.querySelector('#box1');
    div1.style.cssText = 'width:100px;height:100px;background:red';
    div1.style.cssText += 'background:green';

    //2、下面是一个下拉菜单小例子 我们一般不鼓励直接写行间样式，所以把样式写在class中，通过控制class来调整样式。
    let menu = document.querySelector('.title');
    let list = document.querySelector('.list');
    menu.addEventListener('click',function () {
        if(list.className == 'list show'){
            list.className = 'list';
        }else {
            list.className = 'list show';
        }
    });

    let pinkDiv = document.querySelector('.pink');
    /*
    3、classList属性：获取、设置元素的class列表（类数组）
                     可通过下标获取到元素的每一个class
    el.classList ：返回元素的类名，作为 DOMTokenList 对象。该属性用于在元素中添加，移除及切换 CSS 类。
                   classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。
    add(class1, class2, ...) ：在元素中添加一个或多个类名。如果指定的类名已存在，则不会添加
    contains(class) 返回布尔值，判断指定的类名是否存在。
        可能值：
            true - 元素包已经包含了该类名
            false - 元素中不存在该类名
    item(index)：返回元素中索引值对应的类名。索引值从 0 开始。如果索引值在区间范围外则返回 null
    remove(class1, class2, ...)：移除元素中一个或多个类名。注意： 移除不存在的类名，不会报错。
    toggle(class, true|false) 	在元素中切换类名。
        第一个参数为要在元素中移除的类名，并返回 false。
        如果该类名不存在则会在元素中添加类名，并返回 true。
        第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。例如：
        移除一个 class: element.classList.toggle("classToRemove", false);
        添加一个 class: element.classList.toggle("classToAdd", true);

    总结：classList属性可以方便我们操作元素的class，比直接使用className方便很多。
    */
    console.log(pinkDiv.classList);
    console.log(pinkDiv.classList.length);
    console.log(pinkDiv.classList[0]);
    console.log(pinkDiv.classList.value);
    pinkDiv.classList.add('black');

    let opt = document.querySelector('.option');
    let links = opt.querySelectorAll('a');
    var preChecked = links[0];
    for(var i=0;i<links.length;i++){
        links[i].addEventListener('click',function () {
            preChecked.classList.remove('checked');
            this.classList.add('checked');
            preChecked = this;
        })
    }
</script>
</body>
</html>